import { ref } from 'vue'
import * as echarts from 'echarts'

export function useQualityAnalysisChart() {
  const qualityAnalysisChart = ref(null)

  // 初始化图表的通用函数
  const initChart = (chartRef, option) => {
    if (!chartRef.value) return
    const chart = echarts.init(chartRef.value)
    chart.setOption(option)

    // 添加响应式调整
    window.addEventListener('resize', () => {
      chart.resize()
    })

    return chart
  }

  // 图表7：质量指标分析 - 双柱状图（展示多个党组织的质量数据）
  const initQualityAnalysisChart = async (data) => {
    // 直接使用API返回的数据格式
    const { organizations = [], qualityRates = [], qualityImprovements = [] } = data || {};

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#722ed1',
        borderWidth: 1,
        textStyle: { color: '#fff' },
        formatter: (params) => {
          let result = params[0].name + '<br/>';
          params.forEach(param => {
            const unit = '%';
            result += `${param.marker} ${param.seriesName}: ${param.value}${unit}<br/>`;
          });
          return result;
        }
      },
      legend: {
        data: ['质量合格率', '质量提升幅度'],
        textStyle: { color: '#fff', fontSize: 12 },
        top: 0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: organizations.map(name => name.length > 8 ? name.substring(0, 8) + '...' : name),
        axisLabel: {
          color: '#fff',
          fontSize: 11,
          rotate: 45
        },
        axisLine: { lineStyle: { color: 'rgba(255, 120, 117, 0.3)' } }
      },
      yAxis: [
        {
          type: 'value',
          name: '合格率(%)',
          min: 0,
          max: 100,
          nameTextStyle: { color: '#fff', fontSize: 12 },
          axisLabel: {
            color: '#fff',
            fontSize: 11,
            formatter: '{value}%'
          },
          axisLine: { lineStyle: { color: '#ff7875' } },
          splitLine: { lineStyle: { color: 'rgba(255, 120, 117, 0.1)' } }
        },
        {
          type: 'value',
          name: '提升幅度(%)',
          min: 0,
          max: 2,
          nameTextStyle: { color: '#fff', fontSize: 12 },
          axisLabel: {
            color: '#fff',
            fontSize: 11,
            formatter: '{value}%'
          },
          axisLine: { lineStyle: { color: '#722ed1' } },
          splitLine: { show: false }
        }
      ],
      series: [
        {
          name: '质量合格率',
          type: 'bar',
          yAxisIndex: 0,
          data: qualityRates,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ff7875' },
              { offset: 1, color: '#f5222d' }
            ])
          },
          emphasis: {
            itemStyle: { color: '#ffa39e' }
          },
          barWidth: '30%',
          barGap: '30%'
        },
        {
          name: '质量提升幅度',
          type: 'bar',
          yAxisIndex: 1,
          data: qualityImprovements,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#722ed1' },
              { offset: 1, color: '#b37feb' }
            ])
          },
          emphasis: {
            itemStyle: { color: '#c29ffa' }
          },
          barWidth: '30%'
        }
      ]
    }

    initChart(qualityAnalysisChart, option)
  };

  return {
    qualityAnalysisChart,
    initQualityAnalysisChart
  }
}
